<template>
  <div class="app">
    <h1>App组件</h1>
    <Count ref="count"/>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script setup lang="ts">
// 引入组件
import Count from "./components/Count/index.vue";
import {onMounted, ref} from "vue";

// 要想获取ref 只能通过 自定义的属性名和ref的属性名一样 才可以得到元素的Dom对象
const count = ref();

// ref（子传父） 子组件不执行完 defineExpose方法 是得不到想要的数据的
onMounted(() => {  // 组件挂载完执行
  console.log(count)  // ref 对象
  console.log(count.value)  // prosy 对象
  console.log(count.value.num)  // 真实想要的值
})


/*
* ref(组件通信)总结：
* 1- 要想获取ref 只能通过 自定义的属性名和ref的属性名一样 才可以得到元素的Dom对象
* 2- 通过ref通信 父组件要想获取组件的信息 子组件必须通过 defineExpose 暴露 需要的数据
* 3- ref（父传子） 子组件不执行完 defineExpose方法 是得不到想要的数据的
* */
</script>

<style scoped>
.app {
  background-color: pink;
}
</style>
